<template>
  <div class="ex-detail" v-if="show">
    <div class="em-title">
      <p>Technical details</p>
    </div>
    <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
    <div class="em-des">
      {{ title }}
    </div>
    <div class="ep-content">
      <div class="epc-card" v-for="(item,index) in data">
        <div class="epc-left">
          <div class="epc-left-point"></div>
          <p>{{item.parameter}}</p>
        </div>
        <div class="epc-right">
          <p>{{item.value}}</p>
        </div>
      </div>

    </div>

  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    required: false,
  },
  title: {
    type: String,
    required: false,
  },
});

const title = ref("Model")
const data = ref();
if(props.data){
  data.value = props.data;
}
if(props.title){
  title.value = props.title;
}
const show = ref(data.value.length > 0 )

</script>
<style scoped lang="scss">
.ex-detail {
  position: relative;
  background: #fff;
  width: 1600px;
  //height: 1140px;
  padding: 50px 160px;

  .em-title {
    margin-top: 121px;
    font-size: 56px;
    color: #000;
    font-weight: 600;
    // margin-bottom: 112px;
    width: 100%;
    text-align: center;
  }

  .em-des {
    margin-top: 52px;
    font-size: 20px;
    color: #000;
    font-weight: 700;
    // margin-bottom: 112px;
    width: 1600px;
    height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    font-style: normal;
    text-transform: none;
  }

  .ep-content {
    width: 100%;
    // margin-bottom: 10px;
    margin-top: 8px;

    .epc-card {
      overflow: hidden;
      display: inline-flex;
      margin-top: 8px;

      .epc-left {
        width: 776px;
        height: 72px;
        background: linear-gradient(270deg, rgba(50,115,174, 0) 0%, rgba(50,115,174, 0.1) 100%);
        border-radius: 0px 0px 0px 0px;
        display: inline-flex;


        .epc-left-point {
          width: 24px;
          height: 24px;
          margin: 24px;
          /*background: radial-gradient(circle, #3273AE 0%, rgba(50,115,174, 0.18) 80%, rgba(50,115,174, 0) 100%);*/
          background: linear-gradient( 270deg, rgba(50,115,174,0) 0%, rgba(50,115,174,0.1) 100%);
          border-radius: 50%;
        }

        p {
          font-size: 16px;
          line-height: 72px;
        }
      }

      .epc-right {
        width: 776px;
        height: 72px;
        background: linear-gradient(90deg, rgba(234, 234, 235, 0.2) 0%, rgba(234, 234, 235, 0.16) 18%, rgba(234, 234, 235, 0) 100%);
        border-radius: 0px 0px 0px 0px;

        p {
          font-size: 16px;
          line-height: 72px;
          margin-left: 24px;
        }
      }

    }

    .epc-card:hover .epc-img img {
      transform: scale(1.05);
    }

  }


}


.slide-fade-enter-active {
  transition-delay: 1s;
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
